<template>
  <el-form size="large" :model="spuInfo" :rules="rules" ref="basicRef">
    <el-form-item label="商品名称" prop="spuName">
      <el-input placeholder="请输入商品名称" v-model="spuInfo.spuName"></el-input>
    </el-form-item>
    <el-form-item label="商品描述" prop="spuDescription">
      <el-input placeholder="请输入商品名称" v-model="spuInfo.spuDescription"></el-input>
    </el-form-item>
    <el-form-item label="选择分类" prop="categoryId">
      <el-cascader v-model="spuInfo.categoryId" :options="allCategoryList" @focus="getCategoryList"
                   :props="categoryProps"/>
    </el-form-item>
    <el-form-item label="选择品牌" prop="brandId">
      <el-input placeholder="请输入品牌名称" v-model="spuInfo.brandName"></el-input>
    </el-form-item>
  </el-form>
  <el-row :gutter="20" justify="center">
    <el-col :span="3">
      <div>
        <el-button type="success" @click="next(basicRef)">下一步:设置规格参数</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {reactive, ref, defineProps, onMounted, onUnmounted,} from "vue";
import {reqGetSpuCategoryTreeList} from "@/api/serve/re-market";
import {useGoodsFormStore} from "@/stores/form/goods-form";

const formStore = useGoodsFormStore()
let basicRef = ref()
let allCategoryList = ref([])
let spuInfo = reactive({
  spuName: '',
  spuDescription: '',
  categoryId: '',
  brandName: '',
  weight: 0,
})
const categoryProps = {
  value: 'categoryId',
  label: 'name',
  children: 'children',
  emitPath: false
}

let getCategoryList = async () => {
  let res = await reqGetSpuCategoryTreeList()
  allCategoryList.value = res.data
}

function next(r) {
  r.validate(v => {
    if (v) {
      formStore.next()
    } else return false
  })
}

onUnmounted(() => {
  //组件卸载时提交数据
  formStore.setSpuInfo(spuInfo)
})
onMounted(() => {
  Object.assign(spuInfo, formStore.addGoodsForm.spuInfo)
})
/*校验规则*/
const rules = reactive({
  spuName: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
  categoryId: [
    {required: true, message: '不能为空', trigger: 'blur'},
  ],
})

</script>

<style scoped>
</style>
